<template>
    <div class="progressbar">
        <progress :percent="percent" color="pink" />
        <p>{{ year }}已经过去了{{ days }}天，{{ percent }}%</p>
    </div>
</template>

<script>
export default {
    data () {
        return {
            year: new Date().getFullYear()
        }
    },
    computed: {
        year () {
            return this.year;
        },
        days () {
            let start = new Date();
            start.setMonth(0);
            start.setMonth(1);
            let offset = new Date().getTime() - start.getTime();
            return parseInt((offset/1000/60/60/24) + 1)
        },
        percent () {
            return (this.days*100/this.getDayOfYead()).toFixed(1)
        }
    },
    methods: {
        isLeapYear () {
            if (this.year%400 === 0 || (this.year%4 === 0 && this.year !== 0)) {
                return true
            } else {
                return false
            }
        },
        getDayOfYead () {
            return this.isLeapYear() ? 366 : 365
        }
    }
}
</script>

<style>
.progressbar {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 40px;
}
progress {
    margin-bottom: 10px;
}
</style>
